<template>
  <div class="loading" v-if="store.showLoading">
    <dl>
      <dt>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="122px" height="122px"
          viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
          <circle cx="12.5" cy="61.5" r="10" fill="var(--v-theme)">
            <animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5"
              repeatCount="indefinite" values="61.5;38.5;61.5;61.5" keyTimes="0;0.3;0.6;1" dur="1s" begin="-0.6s">
            </animate>
          </circle>
          <circle cx="37.5" cy="61.5" r="10" fill="#6b7785">
            <animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5"
              repeatCount="indefinite" values="61.5;38.5;61.5;61.5" keyTimes="0;0.3;0.6;1" dur="1s"
              begin="-0.44999999999999996s"></animate>
          </circle>
          <circle cx="62.5" cy="61.5" r="10" fill="var(--v-theme)">
            <animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5"
              repeatCount="indefinite" values="61.5;38.5;61.5;61.5" keyTimes="0;0.3;0.6;1" dur="1s" begin="-0.3s">
            </animate>
          </circle>
          <circle cx="87.5" cy="61.5" r="10" fill="#6b7785">
            <animate attributeName="cy" calcMode="spline" keySplines="0 0.5 0.5 1;0.5 0 1 0.5;0.5 0.5 0.5 0.5"
              repeatCount="indefinite" values="61.5;38.5;61.5;61.5" keyTimes="0;0.3;0.6;1" dur="1s" begin="-0.15s">
            </animate>
          </circle>
        </svg>
      </dt>
      <dd>
        <span>Loading...</span>
      </dd>
    </dl>
  </div>
</template>
<script setup>
import { useIndexStore } from '@/store/path'
const store = useIndexStore()

</script>
<style lang="less" scoped>
.loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  background: var(--v-bg-color);
  color: var(--v-text-color);
  opacity: .98;

  dl {
    text-align: center;

    dt {
      text-align: center;
      svg{
        width: 44px;
        height: 44px;
      }
    }
  }
}
</style>